Hierarchical Menu with Imagemap 2.01: NEW with slide-open-effect
  • Yes, it's true. Just create one single imagemap and this script will generate a real hierarchical menu WITH SLIDING-OPEN-EFFECT. By doing so you kill 3 birds with one stone.
  • Advantage 1: you can give your menubar a very individual visual look.
  • Advantage 2: you get a full-fledged hierarchical menu without caring about font-size, font-color etc.
  • Advantage 3: your menubar looks the same on all browsers.
  • Tested with Internet Explorer 5 and Netscape Navigator 4.7, both Win98.
    Installation:
  • Download this file and save it as HTML-file. It contains the code for your hierarchical menu.
  • Create an image that serves you as menubar. In this sample the the image looks like this.
  • Put this image into the same folder as the HTML-file above.
  • Open your imagemaptool and create an imagemap out of the image.
  • Open the HTML-file and put the HTML-code for your imagemap into DIV-blocks like this:
    <DIV ID="menu0" CLASS="menu">
    <IMG SRC="menumap235.gif" USEMAP="#map0" BORDER=0>
    <MAP NAME="map0">
      <AREA SHAPE=RECT COORDS="0,0,148,36" href="webbuilding205.html" target="main" onClick="javascript:show(0)">
      <AREA SHAPE=RECT COORDS="0,133,148,152" href="javascript205.html" target="main" onClick="javascript:show(1)">
      <AREA SHAPE=RECT COORDS="0,222,148,241" href="dhtml205.html" target="main" onClick="javascript:show(2)">
      <AREA SHAPE=RECT COORDS="0,326,148,345" href="xhtml205.html" target="main" onClick="javascript:show(3)">
      <AREA SHAPE=RECT COORDS="0,402,148,421" href="php205.html" target="main" onClick="javascript:show(4)">
      <AREA SHAPE=RECT COORDS="0,489,148,522" href="mainstart205.html" target="main" onClick="javascript:show(5)">
        <AREA SHAPE=RECT COORDS="13,38,138,123" HREF="submenu205.html" target="main">
        <AREA SHAPE=RECT COORDS="13,155,136,214" HREF="submenu205.html" target="main">
        <AREA SHAPE=RECT COORDS="14,246,118,316" HREF="submenu205.html" target="main">
        <AREA SHAPE=RECT COORDS="9,347,115,395" HREF="submenu205.html" target="main">
        <AREA SHAPE=RECT COORDS="10,426,108,480" HREF="submenu205.html" target="main">
    </MAP>
    </DIV>
  • BLUE: the hotspots for the submenus. This is simple imagemap-linking.
  • RED: the hotspots for the main menus. In this sample we have six of them: 'webbuilding', 'javascript', 'dhtml', 'xhtml', 'php', 'home'.
  • RED: take care that the 'onClick="javascript:show(indexnumber)"' looks like in sample above.
  • GREEN: take care that each main-menu gets a indexnumber starting with zero.
  • BROWN:the file-name of your imagemap.
  • GREY: The DIV-container containing the code for your imagemap!
  • AND NOW TRICKY PART 1: If you use six main-menus (as in this sample) you need six of those DIV-containers. Those six DIV-containers contain all the same imagemap-code. However each of these containers has a different indexnumber starting with zero (THE BIG BLACK ZEROS in this sample).
  • AND NOW TRICKY PART 2: Transfer the y-coordinates (the darkred numbers) into the Array variable menutitle[indexnumber]. You find the Array variable in the head-section of the script. See sample below:
    var menutitle=new Array()
    menutitle[0]="0,36"
    menutitle[1]="133,152"
    menutitle[2]="222,241"
    menutitle[3]="326,345"
    menutitle[4]="402,421"
    menutitle[5]="489,522"
  • Now it's almost done. Just configure the variables of the script (positioning, width of menubar etc.) and you are ready for testing.
  • Download 300+ free DHTML and JavaScripts from www.24fun.com